<!-- 用户数据按月份展示组件 -->
<template name='user_data_all'>
<view >
	<!-- 商品信息-右边 -->
	<view class="box-infos   font12" >
	
		<!-- 数据列表 -->
		<view class="boxsss100" >
			<!-- 增加、删除 -->
			<view class="top-but menu-scroll-w" >
				<view class="top-but-box gap10">
					<view class="input_confirms maxwidth250 floatleft" >
						<uni-data-select
						:localdata="$routeData.getRoute()"
						v-model="headerSearch.route_id"
						@change="(e)=>{$routeData.SetNowRoute(e),search.word='',clickSearch()}"
						placeholder="选择线路"
						placeholder-class="placeholder-class"
						class="color-e40318"
						></uni-data-select>
					</view>
					
					<view class="input_confirms maxwidth250 floatleft" >
						<uni-data-select
						:localdata="$routeData.getGroup()"
						v-model="headerSearch.group_id"
						@change="(e)=>{$global.setStorageRoute('group',e),search.word='',clickSearch()}"
						
						placeholder="选择用户分组"
						placeholder-class="placeholder-class"
						class="color-e40318"
						></uni-data-select>
					</view>
					
					<view class="input_confirms maxwidth250 floatleft" >
						<uni-data-select
						:localdata="$routeData.getLevel()"
						v-model="headerSearch.level_id"
						placeholder="选择价格等级"
						placeholder-class="placeholder-class"
						class="color-e40318"
						></uni-data-select>
					</view>
					
					<!-- 按日查看的选择日期 -->
					<view class="date-center floatleft" >
						<text selectable="true"  class="  riskTitle" >时间范围:</text>
						<picker class="date-left" 
						mode="date" 
						:value="selectMontOrDay.date[0]" 
						@change="changeStartDate"
						>
							<view class="uni-input cursor">{{selectMontOrDay.date.length >0 ? selectMontOrDay.date[0]:'开始时间'}}</view>
						</picker>
						
						<view class="date-c"> - </view>
						
						<picker class="date-left"  
						mode="date" 
						:value="selectMontOrDay.date[1]" 
						@change="changeEndDate"
						>
							<view class="uni-input cursor">{{selectMontOrDay.date.length >1 ? selectMontOrDay.date[1]:'结束时间'}}</view>
						</picker>
						
						<view class="delete-ipu" 
						style="position: unset;transform: none;"
						v-if="selectMontOrDay.date.length >1" 
						@click="selectMontOrDay.date=[],clickSearch(true)"
						>
							<img src="../../static/img/delete-1.png"  ></img>
						</view>
					</view>
					<!-- 搜索 -->
					<view class="floatleft searchBox-data ">
						<view class="riskTitle">客户名称:</view>
						<input
						:focus="search.focus"
						@blur="search.focus=false"
						v-model="search.word" 
						placeholder="输入客户关键字搜索"
						placeholder-class="placeholder-class"
						@confirm="$common.noMultipleClicks('clickSearch',clickSearch)"
						class="search-ipu "
						/>
						<view class="delete-ipu" v-if="search.word!=''" @click="search.word='',search.focus=true">
							<img src="../../static/img/delete-1.png"  ></img>
						</view>
					</view>
					<button @click="$common.noMultipleClicks('clickSearch',clickSearch)" class="rightButttom" >
						<img src="../../static/img/search.png" class="img"></img>
						刷新
					</button>
				
					
					
				
				</view>
			</view>
			
			<table v-if="resData.list && resData.list.length>=1 " id="user_data_all">
				<!-- 表头 -->
				<thead>
					<tr >
						<th style="min-width: 20px;">序</th>
						<th>客户</th>
						<th @click="$common.changeColumnColor('user_data_all',index)">
							<view class="flex centers">
								<view>收款</view>
								<view class="sort-button text-align">
									<view class="desc"  @click="tabClick(index,2,'desc')"></view>
									<view class="asc"   @click="tabClick(index,2,'asc')"></view>
								</view>
							</view>
						</th>
						<th @click="$common.changeColumnColor('user_data_all',index)">
							<view class="flex centers">
								<view>销售</view>
								<view class="sort-button text-align">
									<view class="desc"  @click="tabClick(index,3,'desc')"></view>
									<view class="asc"   @click="tabClick(index,3,'asc')"></view>
								</view>
							</view>
						</th>
						<th @click="$common.changeColumnColor('user_data_all',index)">
							<view class="flex centers">
								<view>销售利润</view>
								<view class="sort-button text-align">
									<view class="desc"  @click="tabClick(index,4,'desc')"></view>
									<view class="asc"   @click="tabClick(index,4,'asc')"></view>
								</view>
							</view>
						</th>
						<th @click="$common.changeColumnColor('user_data_all',index)">
							<view class="flex centers">
								<view>最后时间</view>
								<view class="sort-button text-align">
									<view class="desc"  @click="tabClick(index,1,'desc')"></view>
									<view class="asc"   @click="tabClick(index,1,'asc')"></view>
								</view>
							</view>
						</th>
					</tr>
				</thead>
				<tbody>
					<!-- 内容 -->
					<tr v-for="(item,index) in resData.list"
						:key="index" 
						:class="index==TabcheckedIndex  ? 'goods-list-select':''"
						@click="onclickTab(index)"
						v-if="resData.list && resData.list.length>=1 "
					>
						<td>{{index+1}} </td>
						
						<td @click="openPageMoney(item.name,item.user_id)" class="hover">{{item.name}}</td>
						<!-- 收款 -->
						<td class="centers  col-990">
							<view class=" centers flex" :style="{color:'#2ab100'}">
								<view >{{item.status_1_total==0?'-':item.status_1_total}}</view>
							</view>
						</td>
						<!-- 销售 -->
						<td class="centers  col-990">
							<view class=" centers flex" >
								<view >{{item.status_0_total==0?'-':item.status_0_total}}</view>
							</view>
						</td>
						<!-- 销售利润 -->
						<td class="centers  col-990">
							<view class="flex font12" v-if="item.profit.profit>0">
								<view>
									润:￥{{item.profit.profit}}
								</view>
								
								<view style="margin-left: auto;"
								:style="{color:item.profit.profit_ratio<=5 ? '#ff0000':'#2ab100'}"
								>
									率:{{item.profit.profit_ratio}}%
								</view>
							</view>
							<view v-else class="flex font12">
								-
							</view>
						</td>
						<td class="centers  col-991"  >
							<view class=" centers flex" >
								<view >{{item.latest_end_date}}</view>
							</view>
						</td>
					</tr>
					
					<!-- 表底 -->
					<tr v-if="resData.list!=undefined && resData.list.length>0 "class="e5e5e5 position-buttom">
						<!-- 内容 -->
						<td></td>
						<td></td>
						<!-- 收款 -->
						<td class="centers">
							<view class=" flex centers"  :style="{color:'#2ab100'}">
								<view >收款合计：￥{{parseFloat(status_1_total.toFixed(2))}}</view>
							</view>
						</td>
						
						<!-- 销售 -->
						<td class="centers">
							<view class=" flex centers">
								<view >销售合计：￥{{parseFloat(status_0_total.toFixed(2))}}</view>
							</view>
						</td>
						<!-- 销售利润 -->
						<td class="centers">
							<view class=" flex centers">
								<view >销售利润合计：￥{{parseFloat(profit.toFixed(2))}}</view>
							</view>
						</td>
						<td></td>
					</tr>
				</tbody>
			</table>
			<!-- 暂无数据 -->
			<empty v-if="resData.list!=undefined && resData.list.length==0"></empty>
			<!-- end -->
		</view>


		<!-- 用户页面 -->
		<uni-popup ref="page_money" type="center" :title="pageSearch.name">
			<person_admin  class="h100" :OnPageSearchUserId="pageSearch.user_id" status="firm_user_list"></person_admin>
		</uni-popup>
		<!-- end -->
		<select_goods ref="select_goods" @change="readTiChuGoods"></select_goods>
		

	</view>
</view>
</template>

<script>

	import xinjinheader from "@/components/xinjin-header/xinjin-header.vue"
	import empty from "@/components/admin-components/empty.vue"
	import pages from "@/components/admin-components/pages.vue"
	import select_goods from "@/components/goods/selectGoods.vue"

	export default{
		name:'user_data_all',
		components: {
			xinjinheader,
			empty,
			pages,
			select_goods,
		},
		beforeCreate(){
			this.$options.components.person_admin = require('@/components/user/list.vue').default 
		},
		data(){
			return{
				popupUserDataShow:false,
				status_0_total:0,//销售
				status_1_total:0,//收款
				selectMontOrDay:{
					date:[],//按日查看的日期范围
				},
				sort:{
					priceOrder:-1,
					index:-1,
				},
				userSearchInfo:{//欲要传递到单据页面搜寻的内容
					user_name:'',
					user_id:'',
					date_start:'',
					date_end:'',
				},
				TabcheckedIndex:-1,//选择表项
				pageSearch:{//欲要传递到单据页面搜寻的内容
					name:'',
					user_id:''
				},
				resData:{
				},
			
				search:{//右边 搜索栏
					focus:false,//是否获得焦点
					word:'',//搜索内容
					uid:''
				},
				headerSearch:{// 搜索
					route_id:'',//
					group_id:'0',
					level_id:'0'
				},
				readTiChuGoodsData:''
			}
		},
		 // 此处定义传入的数据
		props: {
			OnPageRouteId: {//其他页面传递进来直接搜寻的，不是菜单打开的
				type: String,
				default: ''
			},
			userType:'',// kh:客户 yg:员工 gys:供应商 
			OnPageSearchUid: {//搜索指定用户
				type: String,
				default: ''
			},
			OnDateStart: {//指定开始时间的
				type: String,
				default: ''
			},
			OnDateEnd: {//指定结束时间的
				type: String,
				default: ''
			},
		
			watch: {
			
			},
		},
		created() {
			
			//默认按日的方式
			var date = this.$common.GetFormattedDate()
			this.selectMontOrDay.date.push(date)
			this.selectMontOrDay.date.push(date)
			
			 //如果不为空的话旧隐藏左边的菜单栏
			if(this.OnPageSearchUid != undefined && this.OnPageSearchUid != ''){
				//搜索用户
				this.search.uid = this.OnPageSearchUid
				this.selectMontOrDay.date = []
				this.loadData(true)
				
			}else if(this.OnPageRouteId != undefined && this.OnPageRouteId != ''){
				//获取指定线路数据
				this.headerSearch.route_id = this.OnPageRouteId
				this.loadData(true)
			}else{
				this.headerSearch.route_id = this.$routeData.GetNowRoute()
				this.loadData(true);
			}
		},
		methods:{
			
			openInfo(item){
				// this.userSearchInfo.user_name = item.name
				// this.userSearchInfo.user_id = item.user_id
				// if(this.selectMontOrDay.date.length>=2){
				// 	this.userSearchInfo.date_start = this.selectMontOrDay.date[0]
				// 	this.userSearchInfo.date_end = this.selectMontOrDay.date[1]
				// }else{
				// 	this.userSearchInfo.date_start = ''
				// 	this.userSearchInfo.date_end = ''
				// }
				// this.$refs.popupUserData.open()
			},
			readTiChuGoods(res){
				try {
					var data = JSON.stringify(res)
					var list = res.data
					var listGoods = []
					for(var i=0;i<list.length;i++){
						listGoods.push(list[i].id) 
					}
					let str = listGoods.map(String).join(','); 
					this.readTiChuGoodsData = str
					
					this.loadData(true)
				} catch (e) {
				}
			},
			//回调第一个时间
			changeStartDate(res){
				this.selectMontOrDay.date[0] = res.detail.value
				this.$set(this.selectMontOrDay.date,0,this.selectMontOrDay.date[0])
				//this.clickSearch(true)
			},
			//回调第二个时间
			changeEndDate(res){
				this.selectMontOrDay.date[1] = res.detail.value
				this.$set(this.selectMontOrDay.date,1,this.selectMontOrDay.date[1])
				//this.clickSearch(true)
			},
			
		
		
			/**
			 * 搜索用户的方法，线路用户不参与搜索
			 * 
			*/
			clickSearch(){
				this.readTiChuGoodsData = ''
				this.loadData(true)
			},
			/**
			 * 筛选点击
			 * 排序
			*/
			tabClick(index,name,type){
				let arr = this.resData.list
				if(name==1){
					if(type=='desc'){
						arr.sort(function(a,b){
								return b.latest_end_time - a.latest_end_time
							}
						);
					}else{
						arr.sort(function(a,b){
								return a.latest_end_time - b.latest_end_time
							}
						);
					}
					
				}else if(name==2){
					if(type=='desc'){
						arr.sort(function(a,b){
								return b.status_1_total - a.status_1_total
							}
						);
					}else{
						arr.sort(function(a,b){
								return a.status_1_total - b.status_1_total
							}
						);
					}
					
				}else if(name==3){
					if(type=='desc'){
						arr.sort(function(a,b){
								return b.status_0_total - a.status_0_total
							}
						);
					}else{
						arr.sort(function(a,b){
								return a.status_0_total - b.status_0_total
							}
						);
					}
				
				}else if(name==4){
					if(type=='desc'){
						arr.sort(function(a,b){
								return b.profit.profit - a.profit.profit
							}
						);
					}else{
						arr.sort(function(a,b){
								return a.profit.profit - b.profit.profit
							}
						);
					}
				
				}
				
				this.resData.list = arr
				this.$common.toast("排序完成")
			},
			/**
			 * 弹出单据窗口
			 * 
			*/
			openPageMoney(name,user_id){
				this.pageSearch.name = name
				this.pageSearch.user_id = user_id
				this.$refs.page_money.open()
			},
			onclickTab(index){
				this.TabcheckedIndex = index
			},
			
			/**
			 * 读取用户
			 * type : goods_list|goods_search
			 * 
			*/
			loadData(isUpdatePage=true,ReqExport=0){
				var that = this
				
				if(isUpdatePage){
					that.status_0_total = 0
					that.status_1_total = 0
					that.profit = 0
				}
				that.TabcheckedIndex=0//初始化列表选中项
				
				//日期构建
				if(that.selectMontOrDay.date.length>=2){
					var start_date = that.selectMontOrDay.date[0]
					var end_date = that.selectMontOrDay.date[1]
				}else{
					var start_date = ''
					var end_date = ''
				}


				that.$common.get_request(
					{
						type:'user_data_all',
						search:that.search.word,//搜索内容
						uid:that.search.uid,//搜索内容
						route_id: that.headerSearch.route_id,//获取某个目录下的商品
						group_id: that.headerSearch.group_id,//获取某个目录下的商品
						level_id: that.headerSearch.level_id,//获取某个目录下的商品

						user_type:(that.userType==undefined || that.userType=='')==true ? '':that.userType,
						start_date:start_date,
						end_date  :end_date,
						readTiChuGoodsData:that.readTiChuGoodsData
					},
					(res)=>{
						
						for (var i=0;i<res.list.length;i++) {
							that.status_0_total = that.status_0_total+res.list[i].status_0_total
							that.status_1_total = that.status_1_total+res.list[i].status_1_total
							that.profit = that.profit+res.list[i].profit.profit
						}
						
						that.resData = res
						
					}
				);
			},
		}
	}
</script>

<style>
</style>
